.nom-checkbox {
  > .nom-field-content {
    line-height: @line-height-base*1.6;

    > .nom-control {
      .s-disabled& {
        cursor: not-allowed;
        opacity: 0.7;

        > input {
          + span {
            background-color: var(--nom-input-bg-disabled);
            border-color: var(--nom-checkbox-border-color) !important;
          }
        }
      }

      position: relative;
      display: inline-block;
      font-size: 1rem;
      line-height: @line-height-base;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;

      i {
        position: absolute;
        top: 2px;
        left: 0;
        display: none;
        width: calc(1rem + 2px);
        height: calc(1rem + 2px);
        background-color: var(--nom-checkbox-checked-bg);
        border: 1px solid var(--nom-checkbox-checked-border-color);
        border-radius: var(--nom-checkbox-border-radius);
        -webkit-animation: nom-checkbox-keyframe-show 0.36s ease-in-out backwards;
        animation: nom-checkbox-keyframe-show 0.36s ease-in-out backwards;
        content: '';
      }

      > input {
        position: absolute;
        z-index: -1;
        opacity: 0;
        filter: alpha(opacity=0);

        + span {
          position: absolute;
          top: 2px;
          left: 0;
          // z-index: 9;
          width: calc(1rem + 2px);
          height: calc(1rem + 2px);
          background-color: var(--nom-checkbox-bg);
          border: 1px solid var(--nom-checkbox-border-color);
          border-radius: var(--nom-checkbox-border-radius);
          box-shadow: var(--nom-checkbox-checker-box-shadow);
          transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);

          &:hover {
            background-color: var(--nom-checkbox-bg-hover);
            border-color: var(--nom-checkbox-checked-border-color);
          }

          .s-checked-part&::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background-color: var(--nom-checkbox-part-checker-color);
            border: 0;
            border-radius: var(--nom-checkbox-part-checker-border-radius);
            box-shadow: var(--nom-checkbox-checker-box-shadow);
            -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
            transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
            content: ' ';
          }
        }

        &:checked + span {
          background-color: var(--nom-checkbox-checked-bg);
          border-color: var(--nom-checkbox-checked-border-color);

          &:hover {
            background-color: var(--nom-checkbox-checked-bg-hover);
          }

          &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            width: 5px;
            height: 10px;
            margin-top: -6px;
            margin-left: -2px;
            border: solid var(--nom-checkbox-checker-color);
            border-width: 0 2px 2px 0 !important;
            box-shadow: var(--nom-checkbox-checker-box-shadow);
            // -webkit-transform: rotate(45deg);
            // transform: rotate(45deg);
            -webkit-animation: nom-checkbox-keyframe-bounce-in 0.2s
              cubic-bezier(0.12, 0.4, 0.29, 1.46) forwards;
            animation: nom-checkbox-keyframe-bounce-in 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46)
              forwards;
            content: '';
          }
        }

        &:checked ~ i {
          display: block;
        }
      }

      > .checkbox-text {
        display: inline-block;

        &:not(.checkbox-text-none) {
          padding-left: 25px;
        }

        &.checkbox-text-none {
          width: 20px;
        }
      }
    }
  }
}

@-webkit-keyframes nom-checkbox-keyframe-bounce-in {
  0% {
    -webkit-transform: scale(0.6) rotate(45deg);
    transform: scale(0.6) rotate(45deg);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(1.03) rotate(45deg);
    transform: scale(1.03) rotate(45deg);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

@keyframes nom-checkbox-keyframe-bounce-in {
  0% {
    -webkit-transform: scale(0.6) rotate(45deg);
    transform: scale(0.6) rotate(45deg);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(1.03) rotate(45deg);
    transform: scale(1.03) rotate(45deg);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

@-webkit-keyframes nom-checkbox-keyframe-show {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

@keyframes nom-checkbox-keyframe-show {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
